<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/ytyz2020/img/favicon.png">
  <link rel="icon" type="image/png" href="/ytyz2020/img/favicon.png">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
<style>
.container {
	z-index:-100;
    height:100%;
    width:100%
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.container > img {
	position: absolute;
	object-fit: cover;
    height:100%;
}
.loading {
    position: absolute;
    height: 8px; width: 150px;
    border: 1px solid #eee;
    background: linear-gradient(to top, #eee, #eee);
    background-size: 0 100%;
    transition: background-size .1s;
    left: 0; top: 0; right: 0; bottom: 0;
    margin: auto;
}
.loading::before {
    content: attr(data-percent)'%';
    position: absolute;
    left: 0; top: -1.5em;
    font-size: 12px;
    color: #eee;
}
</style>
</head>
<body>
<div id="container" class="container">
    <span id="loading" class="loading" data-percent="0"></span>
</div>
<script>
var urlRoot = '/ytyz2020/assets/jpg/a/';
var indexRange = [1, 4];
var maxLength = indexRange[1] - indexRange[0] + 1;
// loading
var eleContainer = document.getElementById('container');
var eleLoading = document.getElementById('loading');
// 存储预加载的DOM对象和长度信息
var store = {
    length: 0
};
// 图片序列预加载
for ( var start = indexRange[0]; start <= indexRange[1]; start++) {
    (function (index) {
        var img = new Image();
        img.onload = function () {
            store.length++;
            // 存储预加载的图片对象
            store[index] = this;
            play();
        };
        img.onerror = function () {
            store.length++;
            play();
        };
        img.src = urlRoot + index + '.jpg';
    })(start);
}

var play = function () {
    // loading进度
    var percent = Math.round(100 * store.length / maxLength);
    eleLoading.setAttribute('data-percent', percent);
    eleLoading.style.backgroundSize = percent + '% 100%';
    // 全部加载完毕，无论成功还是失败
    if (percent == 100) {
        var index = indexRange[0];
        eleContainer.innerHTML = '';
        // 依次append图片对象
        var step = function () {
            if (store[index - 1]) {
                eleContainer.removeChild(store[index - 1]);
            }
            eleContainer.appendChild(store[index]);
            // 序列增加
            index++;
            // 如果超过最大限制
            if (index <= indexRange[1]) {
                setTimeout(step, 1000);
            } else {
                // 本段播放结束回调
                // 我这里就放一个重新播放的按钮
                //eleContainer.insertAdjacentHTML('beforeEnd', '<button onclick="play()">再看一遍英姿</button>');
                play();
            }
        };
        // 等100%动画结束后执行播放
        //setTimeout(step, 1000);
        step();
    }
};
</script>
<p>我是文字</p>
</body>
</html>